<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link href="../css/mui.poppicker.css" rel="stylesheet" />
    <title>退货</title>
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        font-size: 13px;
        background-color: #fff;
      }
      
      .flex {
        display: flex;
        margin-top: 5px;
      }
      
      .flex-item {
        flex: 1;
      }
      
      .mui-select {
        width: 80%;
        margin-left: 10%;
        border: 1px solid #C0C0C0;
        border-radius: 6px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 6px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .mui-select:before {
        top: 1px;
        right: 5px;
      }
      
      .add-goods-type {
        margin-top: 8px;
        position: relative;
        height: 26px;
        line-height: 26px;
        vertical-align: middle;
      }
      
      .add-goods-type img {
        margin-top: 2px;
        margin-left: 10px;
        margin-right: 5px;
      }
      
      .shop-store {
        margin-left: 10px;
      }
      
      .add-goods-type span {
        padding-bottom: 2px;
      }
      /**/
      
      .goodsName-box {
        flex: 5;
      }
      
      .goodsId-box {
        flex: 5;
      }
      
      .mui-input-row input {
        height: 26px;
        line-height: 24px;
        font-size: 13px;
        margin-bottom: 0;
        width: 90%;
        margin-left: 5%;
        padding: 0 3px;
      }
      
      .mui-input-row .mui-input-clear~.mui-icon-clear {
        top: 3px;
      }
      
      .search-btn-box {
        flex: 3;
      }
      
      .search-btn {
        border: 1px solid transparent;
        background-color: #ff6800;
        color: #fff;
        height: 28px;
        line-height: 26px;
        text-align: center;
        width: 80%;
        margin-left: 10%;
        border-radius: 2px;
        font-size: 14px;
      }
      /**/
      
      .purchase-link {
        float: right;
        margin-right: 10px;
      }
      /*列表*/
      
      .goods-list {
        list-style: none;
      }
      
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
      
      .goods-each:after {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .img-box {
        flex: 2;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
        height: 100%;
      }
      
      .withdraw-num {
        position: absolute;
        right: 20px;
      }
      
      .choose-btn {
        width: 70%;
        position: absolute;
        bottom: -70px;
        right: 5px;
        text-align: center;
      }
      .sure-choose-btn{
      	background-color: #FF9800;
      	border-color: #FF9800;
      }
      .sure-choose-btn:active{
      	background-color: #ef9a60;
      }
      .cancel-choose-btn{
      	background-color: #DBDBDB;
      	border-color: #DBDBDB;
      }
      .cancel-choose-btn:active{
      	background-color: #f1eded;
      }
      /*滚动区*/
      
      .mui-scroll-wrapper {
        top: 96px;
        bottom: 39px;
      }
      /*底部*/
      
     footer {
        height: 42px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 15px;
        padding: 2px 0 4px;
      }
      
      footer:before {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 42px;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .withdraw-next-btn {
        background-color: #FF9800;
        height: 36px;
        line-height: 36px;
        color: #fff;
        width: 98%;
        margin: 0 auto;
      }
      .withdraw-next-btn:active{
      	background-color: #ff6600;
      }
      /*加载*/
      
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
      /**/
      
      .no {
        text-align: center;
        font-size: 14px;
        line-height: 30px;
      }
      /**/
      .mui-popover {
        height: 100px;
      }
      
      .mui-popover .mui-scroll-wrapper {
        top: 0;
        bottom: 0;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div class="flex">
        <div class="flex-item">
          <div id="selsct-type" class="mui-select selsct-type">
            <span>全部尺寸</span>
          </div>
        </div>
        <div class="flex-item">
          <div id="select-tag" class="mui-select select-tag">
            <span>全部用途</span>
          </div>
        </div>
      </div>
      <div style="margin-top: 0;" class="flex">
        <div class="goodsName-box">
          <div class="mui-input-row">
            <input type="text" class="mui-input-clear" placeholder="请输入名称">
          </div>
        </div>
        <div class="goodsId-box">
          <div class="mui-input-row">
            <input type="text" class="mui-input-clear" placeholder="请输入ID">
          </div>
        </div>
        <div class="search-btn-box">
          <div class="search-btn">
            查找
          </div>
        </div>
      </div>
      <!---->
      <div class="add-goods-type">
        <!--<img id='radioOld' src="../images/radio (3).png" alt="" /><span class="addOldGoods">追加货品</span>-->
        <!--<img id='radioNew' src="../images/radio (4).png" alt="" /><span class="addNewGoods">新添货品</span>-->
        <span class="shop-store">门店仓库</span>
        <a class="purchase-link">本店退货单</a>
      </div>
      <!---->
      <div id="refreshContainer" class="mui-scroll-wrapper total-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="goods-list mui-table-view mui-table-view-chevron">

          </ul>
          <!---->
          <script id="goodsLi" type="text/html">
            <%if(list.length>0){%>
            <% for(var i=0; i<list.length; i++) {%>
            <li class="goods-each">
              <div class="flex">
                <div class="img-box">
                  <a href="#middlePopover" class="img-info" index="<%=i%>"><img src="<%=imgPath+list[i].wareGoods.cutImg%>" alt="" /></a>
                </div>
                <div class="goods-info-box">
                  <div class="goods-name">
                    <%=list[i].wareGoods.name%>
                  </div>
                  <div class="goods-id">货品ID：
                    <%=list[i].wareGoods.wareGoodsId%>
                  </div>
                  <div class="goods-num">门店库存：
                    <%=list[i].shopGoodsAmount.amount%>
                  </div>
                </div>
                <% if(list[i].isChoose){%>
                <div class="goods-op-box">
                  <span class="withdraw-num">申请退货数:<%=list[i].refundAmount%></span>
                  <button type="button" class="cancel-choose-btn mui-btn mui-btn-danger choose-btn " index="<%= i %>" data-id="<%=list[i].wareGoods.wareGoodsId%>">取消退货</button>
                </div>
                <%} else {%>
                <% if(list[i].shopGoodsAmount.amount>0){%>
                <div class="goods-op-box">
                  <div class="sure-choose-btn mui-btn mui-btn-primary choose-btn " index="<%= i %>" data-id="<%=list[i].wareGoods.wareGoodsId%>">退货</div>
                </div>
                <%}else{%>
                <div class="goods-op-box">
                  <div class="sure-choose-btn mui-btn mui-btn-primary choose-btn " disabled index="<%= i %>" data-id="<%=list[i].wareGoods.wareGoodsId%>">退货</div>
                </div>
                <%}%>
                <%}%>
              </div>
            </li>
            <%}%>
            <%}else{%>
            <p class="no">暂无数据</p>
            <%}%>
          </script>
          <!---->
          <!--加载中-->
          <div class="mui-pull-bottom-pocket">
            <div class="mui-pull">
            </div>
          </div>
          <!--加载中-->
        </div>
      </div>
    </div>
    <!--底部-->
    <footer class="withdraw-btn-box">
      <div class="withdraw-next-btn">
        下一步
      </div>
    </footer>
    <!---->
    <!--显示附加信息-->
    <div id="middlePopover" class="mui-popover">
      <div class="mui-popover-arrow"></div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <p class="fullName">规格：<span></span></p>
          <p class="tags">用途：<span></span></p>
          <p class="score">积分：<span></span></p>
        </div>
      </div>
    </div>
    <!---->
  </body>
  <script src="../config.js"></script>
  <script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/mui.min.js"></script>
  <script src="../js/mui.picker.js"></script>
  <script src="../js/mui.poppicker.js"></script>
  <script>
    (function($, doc) {
      var types = [{
          value: '',
          text: '全部尺寸'
        }],
        tags = [{
          value: '',
          text: '全部用途'
        }],
        currentShopObj,
        params = {
          tagIds: [],
          pageNo: 1,
          goodsName: '',
          goodsId: '',
          type: '',
          shopId: '',
          isAmountUpper: true
        },
        pageList = [],
        refundGoodsList = [],
        refundGoods = {
          refund: {
            storeId: '',
            storeName: '',
            refundRecivedStatus: 0,
          },
          goodsList: []
        },
        refundId = '',
        isLoading = false,
        pageTatol = 0
      $.init({
        //				pullRefresh: {
        //					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        //					up: {
        //						height:100,
        //						auto:true,
        //						contentrefresh: '正在加载...',
        //						contentnomore:'没有更多数据了',
        //						callback: pullupRefresh
        //					}
        //				}
      })
      $.plusReady(function() {
        receiveParams()
        getTag()
        getTypes()
        getGoods(params)

      })
      $.ready(function() {
        bindEvent()
      })

      //滚动
      $('.mui-scroll-wrapper').scroll({
        scrollY: true,
        bounce: true,
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
      });

      function pullupRefresh() {
        mui('.mui-scroll-wrapper').scroll().reLayout();
        var that = this
        setTimeout(function() {
          that.endPullupToRefresh(true);
        }, 2000)
      }

      function receiveParams() {
        var self = plus.webview.currentWebview();
        currentShopObj = self.currentShopObj;
        params.shopId = self.currentShopObj.storeId
        params.storeName = self.currentShopObj.storeName
        refundGoods.refund.storeId = self.currentShopObj.storeId
        refundGoods.refund.storeName = self.currentShopObj.storeName
      }
      //设置加载状态
      function setLoading(type) {
        switch(type) {
          case 1:
            document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner"></div>\
						<div class="mui-pull-caption">正在加载</div>'
            break
          case 2:
            document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-caption">没有更多</div>'
            break
          case 0:
            document.querySelector(".mui-pull").innerHTML = ''
            break
        }

      }

      function bindEvent() {
        //滚动监听
        document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
          if(e.detail.y <= e.detail.maxScrollY) {
            if(isLoading === false) {
              if(++params.pageNo <= pageTatol) {
                ajaxGoods(params)
              } else {
                setLoading(2)
              }
            }
          }
        });
        //          	监听
        window.addEventListener('changeList', function(e) {
          refundGoods.goodsList = e.detail.goodsList
          refundGoods.refund.refundId = e.detail.refundId
          setPage(pageList)
        })
        //跳转列表
        $('.add-goods-type').on('tap', 'a', function() {
          var titleText = currentShopObj.storeName + '-退货'
          $.openWindow({
            url: 'withdrawList.html',
            id: 'withdrawList',
            styles: {
              top: 0, //新页面顶部位置
              bottom: 0, //新页面底部位置
              titleNView: {
                titleText: titleText,
                titleColor: "#FFFFFF",
                titleSize: "17px",
                backgroundColor: "#FF6800",
                autoBackButton: true,
                buttons: [{
                  float: "right",
                  fontSize: "18px",
                  fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                  text: "\ue602",
                  onclick: function() {
                    var allPage = plus.webview.all()
                    var nowPage = plus.webview.getWebviewById('index')
                    for(var i = 0; i < allPage.length; i++) {
                      if(allPage[i].getURL() !== nowPage.getURL()) {
                        plus.webview.close(allPage[i]);
                      }
                    }
                  }
                }],
                splitLine: {
                  color: "#CCCCCC",
                  height: "1px"
                }
              }
            },
            extras: {
              currentShopObj: currentShopObj,
              type: 1
            }
          })
        })
        //显示用途
        $('.goods-list').on('tap', '.img-info', function(e) {
          var ind = this.getAttribute('index')
          var typeFullName = pageList[ind].typeFullName
          var tags = ''
          pageList[ind].tags.forEach(function(item) {
            tags += item.tagDescribe + ' '
          })
          document.querySelector(".fullName span").innerText = typeFullName
          document.querySelector(".tags span").innerText = tags
          document.querySelector(".score span").innerText = pageList[ind].wareGoods.score
        })
        //加
        $('.goods-list').on('tap', '.sure-choose-btn', function(e) {
          var goodsId = this.getAttribute('data-id')
          var index = this.getAttribute('index')
          var btnArray = ['取消', '确定'];
          mui.prompt('请输入退货数量', pageList[index].refundAmount ? pageList[index].refundAmount : 0, '', btnArray, function(e) {
            if(e.index == 1) {
              if(e.value) {
                pageList[index].refundAmount = e.value * 1
                var goodsBox = doc.getElementsByClassName("goods-op-box")
                goodsBox[index].innerHTML = '<span class="withdraw-num">退货数：' + e.value + '</span>\
                  <button type="button" class="cancel-choose-btn mui-btn mui-btn-danger choose-btn " index="' + index + '" data-id="' + goodsId + '">取消退货</button>'
                pageList[index].isChoose = true
                refundGoods.goodsList.push({
                  goodsName: pageList[index].wareGoods.name,
                  goodsId: pageList[index].wareGoods.wareGoodsId,
                  refundAmount: pageList[index].refundAmount,
                  shopGoodsAmount: pageList[index].shopGoodsAmount.amount,
                  cutImg: pageList[index].wareGoods.cutImg,
                  tags: pageList[index].tags,
                  typeFullName: pageList[index].typeFullName,
                  score: pageList[index].wareGoods.score
                })

              } else {
                pageList[index].refundAmount = 1
              }
            } else {}
          }, 'div')
          document.querySelector('.mui-popup-input input').type = 'number'

        })
        //减
        $('.goods-list').on('tap', '.cancel-choose-btn', function() {
          var goodsId1 = this.getAttribute('data-id')
          var index1 = this.getAttribute('index')
          var goodsBox = doc.getElementsByClassName("goods-op-box")
          goodsBox[index1].innerHTML = '<div class="sure-choose-btn mui-btn mui-btn-primary choose-btn " index="' + index1 + '" data-id="' + goodsId1 + '">选择</div>'
          pageList[index1].isChoose = false
          for(var i = 0; i < refundGoods.goodsList.length; i++) {
            if(refundGoods.goodsList[i].goodsId == pageList[index1].wareGoods.wareGoodsId) {
              pageList[index1].refundAmount = 0
              refundGoods.goodsList.splice(i, 1)
            }
          }
        })
        //		下一步
        $('.withdraw-btn-box').on('tap', '.withdraw-next-btn', function() {
          if(refundGoods.goodsList.length > 0) {
            config.ajax({
              type: "post",
              url: config.basePath + "/refund/writeDraft",
              async: true,
              data: refundGoods,
              headers: {
                'Content-Type': 'application/json'
              },
              success: function(res) {
                if(res.result === 1) {
                  if(!refundId) {
                    refundId = res.refundId
                  }
                  var titleText1 = currentShopObj.storeName + '-退货'
                  $.openWindow({
                    url: 'withdraw2.html',
                    id: 'withdraw2',
                    styles: {
                      top: 0, //新页面顶部位置
                      bottom: 0, //新页面底部位置
                      titleNView: {
                        titleText: titleText1,
                        titleColor: "#FFFFFF",
                        titleSize: "17px",
                        backgroundColor: "#FF6800",
                        autoBackButton: true,
                        buttons: [{
                          float: "right",
                          fontSize: "18px",
                          fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                          text: "\ue602",
                          onclick: function() {
                            var allPage = plus.webview.all()
                            var nowPage = plus.webview.getWebviewById('index')
                            for(var i = 0; i < allPage.length; i++) {
                              if(allPage[i].getURL() !== nowPage.getURL()) {
                                plus.webview.close(allPage[i]);
                              }
                            }
                          }
                        }],
                        splitLine: {
                          color: "#CCCCCC",
                          height: "1px"
                        }
                      }
                    },
                    extras: {
                      currentShopObj: currentShopObj,
                      refundGoodsList: refundGoods.goodsList,
                      refundId: refundId,
                      tags: tags,
                      types: types,
                    }
                  })
                } else {
                  $.toast(res.errormsg);
                }
              }
            });
          } else {
            $.toast('请选择货品');
          }
        })
      }
      //查找
      document.querySelector(".search-btn").addEventListener('tap', function() {
        params.goodsId = document.querySelector(".goodsId-box input").value
        params.goodsName = document.querySelector(".goodsName-box input").value
        params.pageNo = 1
        pageList = []
        ajaxGoods(params)
        mui('.total-scroll-wrapper').scroll().scrollTo(0, 0, 100)
      })

      function setTypesSelect() {
        var typePicker = new $.PopPicker({
          layer: 2
        });
        typePicker.setData(types);
        var typeCheck = doc.querySelector("#selsct-type")
        typeCheck.addEventListener('tap', function(event) {
          typePicker.show(function(items) {
            if(items[1].text) {
              typeCheck.innerText = '' + items[0].text + "/" + items[1].text;
              params.type = items[1].value
            } else {
              typeCheck.innerText = '' + items[0].text
              params.type = ''
            }
            //返回 false 可以阻止选择框的关闭
            //return false; 
          });
        }, false)
      }

      function setTagsSelect() {
        var tagPicker = new $.PopPicker();
        tagPicker.setData(tags)
        var tagCheck = doc.querySelector('#select-tag')
        tagCheck.addEventListener('tap', function(event) {
          tagPicker.show(function(items) {
            tagCheck.innerHTML = "<span>" + items[0].text + "</span>"
            params.tagIds = []
            if(items[0].value) {
              params.tagIds.push(items[0].value)
            }
          })
        })
      }

      function getTypes() {
        config.ajax({
          type: "get",
          url: config.basePath + "/goodsType/get.do",
          async: true,
          success: function(res) {
            if(res.result === 1) {
              res.data.forEach(function(item) {
                var obj = {}
                obj.value = item.id
                obj.text = item.name
                var children = []
                if(item.children.length > 0) {
                  item.children.forEach(function(item1) {
                    var obj1 = {}
                    obj1.value = item1.id
                    obj1.text = item1.name
                    children.push(obj1)
                  })
                }
                obj.children = children
                types.push(obj)
              })
              setTimeout(function() {
                setTypesSelect()
              }, 0)
            }
          }
        });

      }

      function getTag() {
        config.ajax({
          type: 'post',
          url: config.basePath + '/tag/get.do',
          data: {
            tagDescribe: ''
          },
          headers: {
            'Content-Type': 'application/json'
          },
          success: function(res) {
            if(res.result === 1) {
              res.tags.forEach(function(item) {
                var obj = {}
                obj.value = item.tagId
                obj.text = item.tagDescribe
                tags.push(obj)
              })
            }
            setTimeout(function() {
              setTagsSelect()
            }, 0)
          }
        })

      }

      function getGoods(param) {
        if(pageList.length > 0) {
          setPage(pageList)
        } else {
          ajaxGoods(param)
        }
      }

      function ajaxGoods(param) {
        isLoading = true
        setLoading(1)
        config.ajax({
          type: "post",
          url: config.basePath + "/shopGoods/checkLike",
          async: true,
          data: param,
          headers: {
            'Content-Type': 'application/json'
          },
          success: function(res) {
            if(res.result === 1) {
              setLoading(0)
              if(param.pageNo === 1) {
                pageTatol = res.pageList.pageTatol
                if(res.pageList.data.length > 0) {
                  pageList = res.pageList.data
                  setPage(pageList)
                } else {
                  pageList = []
                  setPage([])
                }
              } else {
                res.pageList.data.forEach(function(item) {
                  pageList.push(item)
                })
                setPage(pageList)
              }
              setTimeout(function() {
                isLoading = false
              }, 1500)
            } else {
              setLoading(0)
              pageList = []
              setPage([])
              setTimeout(function() {
                isLoading = false
              }, 1500)
            }
          }
        });
      }
      //页面
      function setPage() {
        for(var j = 0; j < pageList.length; j++) {
          var ifEqual = false
          for(var p = 0; p < refundGoods.goodsList.length; p++) {
            if(pageList[j].wareGoods.wareGoodsId - 0 === refundGoods.goodsList[p].goodsId - 0) {
              pageList[j].isChoose = true
              pageList[j].refundAmount = refundGoods.goodsList[p].refundAmount
              ifEqual = true
              break
            }
          }
          if(!ifEqual) {
            pageList[j].isChoose = false
            pageList[j].refundAmount = 0
          }
        }
        var html = template('goodsLi', {
          list: pageList,
          imgPath: config.imgPath
        })
        $('.goods-list')[0].innerHTML = html
      }
    }(mui, document))
  </script>

</html>